<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jquery-3.5.1.js"></script>
    <style>
        tr {
            height: 50px;
            text-align: center;
        }

        #add:hover {
            background-color: red;
            cursor: pointer;

        }

        #add {
            background-color: lightgray;
        }

        .hidden {
            border: none;
            outline: none;
            text-align: center;
        }

        td,
        th {
            border-top: 1px solid lightgrey;
            border-left: 1px solid lightgrey;
            border-right: 1px solid lightgrey;
        }

        input {
            width: 100px;
            height: 30px;
            font-size: 18px;
        }

        button {
            width: 60px;
            height: 37px;
            margin: 8px 5px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价格</th>
            <th>操作</th>
        </tr>
        <tr class="shop">
            <td><input type="text" name="pname" id="" value="一根葱"></td>
            <td><input type="text" name="pprice" id="" value="2"></td>
            <td><input type="text" name="pnumber" id="" value="10"></td>
            <td><input type="text" name="ptotal" id=""></td>
            <td><button class="button1">修改</button> <button class="button2">删除</button> <button class="button3">
                    确定</button> </td>
        </tr>
        <tr id="add">
            <td colspan="5">添加商品</td>
        </tr>
    </table>

    <script>


        $(document).ready(function () {
            console.log();
            let buttonNum = 1;

            //添加商品
            $('#add').click(function (e) {
                var html = `<tr id='trNumber${buttonNum}' class='shop'><td><input type='text' name='pname'></td><td><input type='text' name='pprice'></td><td><input type=text name='pnumber'></td><td><input type='text' name='ptotal'></td><td><button class='button1'>修改</button> <button id='buttonNum${buttonNum}' class='button2'>删除</button> <button class='button3'>确定</button> </td></tr>`;
                // alert(buttonNum);
                $(this).before(html)
                buttonNum++;
                // console.log($(`#trNumber${buttonNum}`));
                // $('tr:odd').css("background-color", "lightgray");
                // $(this).css("background-color", "#fff");
            })

            // 删除
            $('body').on("click", '.button2', function (e) {
                $(this).parent().parent().remove();
            })

            // 确定
            $('body').on("click", '.button3', function (e) {
                let tr = $(this).parent().parent();
                let trs0 = $(this).parent('td').prev().prev().prev().prev().children('input:eq(0)');
                let trs1 = $(this).parent('td').prev().prev().prev().children('input:eq(0)');
                let trs2 = $(this).parent('td').prev().prev().children('input:eq(0)');
                let trs3 = $(this).parent('td').prev().children('input:eq(0)');
                trs3.val(parseInt(trs1.val()) * parseInt(trs2.val()));
                console.log(trs1);

                trs0.addClass('hidden').attr('readonly', 'true');
                trs1.addClass('hidden').attr('readonly', 'true');
                trs2.addClass('hidden').attr('readonly', 'true');
                trs3.addClass('hidden').attr('readonly', 'true');
            })

            // 修改
            $('body').on("click", '.button1', function (e) {
                let tr = $(this).parent().parent();
                let trs0 = $(this).parent('td').prev().prev().prev().prev().children('input:eq(0)');
                let trs1 = $(this).parent('td').prev().prev().prev().children('input:eq(0)');
                let trs2 = $(this).parent('td').prev().prev().children('input:eq(0)');
                let trs3 = $(this).parent('td').prev().children('input:eq(0)');
                trs0.removeClass('hidden').removeAttr('readonly');
                trs1.removeClass('hidden').removeAttr('readonly');
                trs2.removeClass('hidden').removeAttr('readonly');
                trs3.removeClass('hidden').removeAttr('readonly');
            })

        });
    </script>
</body>

</html>